<template>
  <div>
      <!-- -->
      <div class="tabbar_wrap">
        <div :class="['tabbar_one',index==acIndex?'active':'']" v-for="(item,index) in navList" :key="item.name" @click="changeTab(item,index)">
          <img :src="index===acIndex?item.selIcon:item.icon" alt="">
          <div>{{item.name}}</div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: '2209vueTabbar',

  data() {
    return {
      // 本地图片作为数据使用 需要加require导入
      acIndex:0,//激活下标
      navList:[{
        path:"/home",
        icon:require("../assets/images/nav/home-off.png"),
        selIcon:require("../assets/images/nav/home-on.png"),
        name:"首页"
      },
    {
        path:"/cate",
        icon:require("../assets/images/nav/ic_catefory_normal.png"),
        selIcon:require("../assets/images/nav/ic_catefory_pressed.png"),
        name:"分类"
      },
    {
        path:"/cart",
        icon:require("../assets/images/nav/cart-off.png"),
        selIcon:require("../assets/images/nav/cart-on.png"),
        name:"购物车"
      },
     {
        path:"/mine",
        icon:require("../assets/images/nav/my-off.png"),
        selIcon:require("../assets/images/nav/my-on.png"),
        name:"个人中心"
      }]
    };
  },

  mounted() {
    
  },

  methods: {
    changeTab(item,index){
      this.acIndex=index;
      // 跳转其他页面、
      this.$router.push(item.path)
    }
  },
};

</script>
<style lang="less" scoped>
  .tabbar_wrap{
    width:100%;
    height:90px;
    background:#ccc;
    display:flex;
    justify-content:space-around; 
    position:fixed;
    bottom:0;
    left:0;
    .tabbar_one{
      width:23%;
      height:100px;
      text-align:center;
      font-size:20px;
      &.active{
        color:red;
      }
      img{
        width:60px;
        height:60px;
      }
    }
  }
</style>